<template>
  <div>
    <div class="title">
      <i class="iconfont iconnew"></i>
      <div class="center">
        <i class="iconfont iconsearch"></i>
        <input @click="$router.push('/mysearch')" readonly="true" class="search" type="text" placeholder="搜索新闻">
      </div>
      <i @click="$router.push('/userInfo')" class="iconfont iconwode"></i>
    </div>
    <div class="navbar">
      <van-tabs v-model="active">
        <van-tab v-for="(item, index) in names" :title="item.name" :key="index">
          <van-list v-model="loading" :finished="finished" finished-text="没有更多了" :immediate-check="false" @load="onLoad">
            <div v-for="(itemContent, index) in item.posts" :key="index">
              <div v-if="itemContent.type==2">
                <video-list :imgs="itemContent.cover" :author="itemContent.user.nickname" :title="itemContent.title"
                :id="itemContent.id"></video-list>
              </div>
              <div v-else-if="itemContent.cover.length < 3">
                <one-img-list :imgs="itemContent.cover" :author="itemContent.user.nickname" :title="itemContent.title"
                :id="itemContent.id"></one-img-list>
              </div>
              <div v-else>
                <more-img-list :title="itemContent.title" :author="itemContent.user.nickname" :imgs="itemContent.cover"
                :id="itemContent.id"></more-img-list>
              </div>
            </div>
          </van-list>
        </van-tab>
      </van-tabs>
    </div>
    <div class="video"></div>
  </div>
</template>

<script>
import oneImgList from '@/commonComponent/oneImgList'
import moreImgList from '@/commonComponent/moreImgList'
import videoList from '@/commonComponent/videoList'
import indexApi from '@/api/index'
import { Tab, Tabs } from 'vant'

export default {
  data() {
    return {
      names: [],
      active: 0,
      id: 0,
      categoryId: 0,
      loading: false,
      finished: false,
      currentIndex: 1,
      pageSize: 6
    }
  },
  created() {
    // this.getAllData()
    // this.getCategroyData()
    let token = localStorage.getItem('token')
    this.active = token ? 1 : 0
  },
  watch: {
    active(newVal) {
      // if (this.names[newVal].posts.length == 0) {
      this.getCategroyData(newVal)
      this.id = newVal
      // }

    }
  },
  methods: {
    onLoad() {
      console.log('触发分页效果');
      setTimeout(() => {
        this.currentIndex += 1
        this.getAllData(this.categoryId, this.id)
      }, 2000);

    },
    getCategroyData(newVal) {
      indexApi.getCategoryData().then(res => {
        let resp = res.data
        resp.data.forEach(item => {
          item.posts = [],
            item.currentIndex = 1,
            item.finished = false
        })
        this.names = resp.data
        this.currentIndex = this.names[newVal].currentIndex
        this.finished = this.names[newVal].finished
        console.log(this.names);
        if (this.names.length) {
          this.categoryId = this.names[newVal].id
        }
        if (this.names[newVal].posts.length == 0) {
          this.getAllData(this.categoryId, newVal)
        }

      })
    },
    getAllData(id, newVal) {
      indexApi.getIndexNavbarData(id, this.currentIndex, this.pageSize).then(res => {
        let resp = res.data
        let newData = [...this.names[newVal].posts, ...resp.data]
        this.names[newVal].posts = newData
        if (resp.data.length < this.pageSize) {
          this.loading = false
          this.finished = true
        }
      })
    }
  },
  components: {
    oneImgList,
    moreImgList,
    videoList
  }
}
</script>

<style lang="less"  scoped>
input::-webkit-input-placeholder {
  color: white;
}
.title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-sizing: border-box;
  width: 100%;
  height: 14vw;
  background-color: #ff0000;

  .iconnew {
    font-size: 16vw;
    color: white;
    padding-left: 2vw;
  }

  .center {
    flex: 1;
    padding: 0 7vw;

    .search {
      width: 100%;
      text-indent: 9vw;
      border: none;
      background-color: #f97979;
      outline: none;
      height: 10vw;
      border-radius: 5vw;
      color: white;
    }

    i {
      position: absolute;
      top: 4.5vw;
      left: 27vw;
      color: white;
      font-size: 5vw;
    }
  }

  .iconwode {
    /* background-color: white; */
    font-size: 7vw;
    color: white;
    padding-right: 5vw;
  }
}
</style>
